<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>

<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">渠道类型</label>
                            <div class="layui-input-inline">
                                <div id="serverGroup"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select" >
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in services" :value="item.server_id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label">支付渠道:</label>
                            <div class="layui-input-inline">
                                <select name="channel" class="layui-select">
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in payChannel" :value="item.id">{{item.name}}</option>

                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">代理渠道:</label>
                            <div class="layui-input-inline">
                                <select name="gamechannel" class="layui-select" lay-filter="gamechannel">
                                    <option value="">全部</option>
                                    <option v-for="(item,index) in channels" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">包号列表</label>
                            <div class="layui-input-inline">
                                <div id="serverPackage"></div>
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label">记录时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDateTimeBegin" id="createTime0"
                                       placeholder="开始时间" autocomplete="off" class="layui-input" />
                                <input type="text" name="createDateTimeEnd" id="createTime1"
                                       placeholder="截止时间" autocomplete="off" class="layui-input" />
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>

            </div>

        </fieldset>
        <div class="layuimini-main">
            <!-- 统计说明 -->
            <fieldset class="table-search-fieldset">
                <legend>统计说明</legend>
                <div style="margin: 10px;">
                    <ul>
                        <li v-for="item in tips" :key="item">{{ item }}</li>
                    </ul>
                </div>
            </fieldset>
        
            <!-- 充值时间分布 -->
            <fieldset class="table-search-fieldset">
                <legend>充值时间分布</legend>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th rowspan="2">时间分布</th>
                            <th colspan="2">首次充值</th>
                            <th colspan="2">二次充值到首次充值</th>
                            <th colspan="2">三次充值到二次充值</th>
                        </tr>
                        <tr>
                            <th>人数</th>
                            <th>占比</th>
                            <th>人数</th>
                            <th>占比</th>
                            <th>人数</th>
                            <th>占比</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in chargeTimeRows" :key="row.label">
                            <td>{{ row.label }}</td>
                            <td>{{ row.firstCount }}</td>
                            <td>{{ row.firstRate }}</td>
                            <td>{{ row.secondCount }}</td>
                            <td>{{ row.secondRate }}</td>
                            <td>{{ row.thirdCount }}</td>
                            <td>{{ row.thirdRate }}</td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        
            <!-- 首次付费金额 -->
            <fieldset class="table-search-fieldset">
                <legend>首次付费金额</legend>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>金额【元】</th>
                            <th>玩家人数</th>
                            <th>占比</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in firstPayRows" :key="row.label">
                            <td>{{ row.label }}</td>
                            <td>{{ row.count }}</td>
                            <td>{{ row.rate }}</td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </div>    </div>
</div>

</body>
</html>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm" auth="payOrder:export" lay-event="export">导出</button>
    </div>
</script>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" auth="payOrder:edit">标记退款</a>

</script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script src="/xm-select-v1.2.4/xm-select.js"></script>

<script>
    var form,$,_this;
    var services = JSON.parse(localStorage.getItem('services'))

    var channels = getEnum('channel')
    var gameGoods = getEnum('gameGoods')
    var serverGroup = getEnum('serverGroup')
    var payChannel = getEnum('payChannel')
    var configgroup =getEnum('configgroup')

    new Vue({
        el: "#app",
        data: {
            services:services,
            channels:channels,
            channel:payChannel,
            packages:[], //所有的包
            packages1:[], //所有的包

            paySum:0,
            selectedChannel: null,
            gameGoodsList:[],
            channelOptions: configgroup,
            tips: [
      "★ 首次付费时间: 玩家第1次付费的游戏时间。",
      "★ 二充到首次时间: 玩家第2次付费距离第1次付费之间的时间间隔",
      "★ 三充到二充时间: 玩家第3次付费距离第2次付费之间的时间间隔",
      "★ 首次付费金额: 玩家首次付费的金额。"
    ],
    chargeTimeRows: [
      { label: "10分钟以内", firstCount: "", firstRate: "", secondCount: "", secondRate: "9999", thirdCount: "", thirdRate: "" },
      { label: "10~30分钟", firstCount: "", firstRate: "", secondCount: "", secondRate: "", thirdCount: "", thirdRate: "" },
      { label: "30~60分钟", firstCount: "", firstRate: "", secondCount: "", secondRate: "", thirdCount: "", thirdRate: "" },
      { label: "60~360分钟", firstCount: "", firstRate: "", secondCount: "", secondRate: "", thirdCount: "", thirdRate: "" },
      { label: "360分钟以上", firstCount: "", firstRate: "", secondCount: "", secondRate: "", thirdCount: "", thirdRate: "" }
    ],
    firstPayRows: [
      { label: "1~10", count: "9999", rate: "99.99%" },
      { label: "11~50", count: "9999", rate: "99.99%" },
      { label: "51~100", count: "9999", rate: "99.99%" },
      { label: "101~500", count: "", rate: "" },
      { label: "501以上", count: "", rate: "" }
    ]
        },
        methods:{
            fetchPayActData(params) {
  var _this = this;
  $.get('/admin/payAct/paginate', params, function(res) {
    if (res.code === 0) {
      // 1. 充值时间分布
      const timeMap = [
        { label: "10分钟以内", key: "0-10" },
        { label: "10~30分钟", key: "10-30" },
        { label: "30~60分钟", key: "30-60" },
        { label: "60~360分钟", key: "60-360" },
        { label: "360分钟以上", key: "360+" }
      ];
      const td = res.timeDistribution || {};
      _this.chargeTimeRows = timeMap.map(row => ({
        label: row.label,
        firstCount: td.firstPayment?.[row.key]?.count ?? "",
        firstRate: td.firstPayment?.[row.key]?.percentage !== undefined ? td.firstPayment[row.key].percentage + "%" : "",
        secondCount: td.secondToFirstInterval?.[row.key]?.count ?? "",
        secondRate: td.secondToFirstInterval?.[row.key]?.percentage !== undefined ? td.secondToFirstInterval[row.key].percentage + "%" : "",
        thirdCount: td.thirdToSecondInterval?.[row.key]?.count ?? "",
        thirdRate: td.thirdToSecondInterval?.[row.key]?.percentage !== undefined ? td.thirdToSecondInterval[row.key].percentage + "%" : ""
      }));

      // 2. 首次付费金额
      const amountMap = [
        { label: "1~10", key: "1-10" },
        { label: "11~50", key: "11-50" },
        { label: "51~100", key: "51-100" },
        { label: "101~500", key: "101-500" },
        { label: "501以上", key: "500+" }
      ];
      const ad = res.amountDistribution || {};
      _this.firstPayRows = amountMap.map(row => ({
        label: row.label,
        count: ad[row.key]?.count ?? "",
        rate: ad[row.key]?.percentage !== undefined ? ad[row.key].percentage + "%" : ""
      }));
    } else {
      layer.msg(res.msg || '查询失败', {icon: 2});
    }
  });

  }
            
        },
        created:function(){
            _this = this;
        },
        mounted:function () {
            var _this = this;

            layui.use(['form', 'table','laydate'], function () {
                form = layui.form;
                $ = layui.jquery;
                var isLodedTable = false;

                var table = layui.table;
                var laydate=layui.laydate;

                laydate.render({
                    elem: '#createTime0',
                    type:'datetime',
                    value: getYmd(0)+ " 00:00:00"
                });
                laydate.render({
                    elem: '#createTime1',
                    type:'datetime',
                    value: getYmd(1) + " 00:00:00"
                });
                laydate.render({
                    elem: '#payTimeBegin',
                    type:'datetime',
                    value: getYmd(0)+ " 00:00:00"
                });
                laydate.render({
                    elem: '#payTimeEnd',
                    type:'datetime',
                    value: getYmd(1) + " 00:00:00"
                });
                //商品列表选择
                $.get('/admin/gameGoods/paginate',{limit:9999999,channeltype:0},function (res) {
                    _this.gameGoodsList = res.data;
                    form.render();
                })//默认官方渠道商品

                form.render();
                form.on('select(setGemValue)',function(data){ //
                    console.log('选择了商品配置类型',data.value)
                    var selectId = data.value;


                        $.get('/admin/gameGoods/paginate',{limit:9999999,channeltype:selectId},function (res) {
                            _this.gameGoodsList = res.data;
                            form.render(); // 在数据更新后再渲染

                        })
                })

                //包列表
                $.get("/admin/gamePackage/paginate",{page:1,limit:9999},function(res){
                    _this.packages = res.data;
                    _this.packages1 = res.data;

                    console.log('选择了商品配置类型1111',_this.packages)

                    _this.updatePackeages(_this.packages); // 初始渲染区服列表选择器
                    _this.updatePackeages1(_this.packages1); // 初始渲染区服列表选择器

                });


                form.render();

                // 更新游戏区选择器
                _this.updatePackeages= function (Packeages) {
                    var datapackeages = [];
                    for (var k in Packeages) {
                        var v = Packeages[k];
                        datapackeages.push({
                            name: v.package_no,
                            value: v.package_no,
                        });
                    }
                    // 渲染游戏区选择器
                    xmSelect.render({
                        el: '#serverPackage',
                        name: "serverPackage",
                        language: 'zn',
                        data: datapackeages,
                        multiple: true,// 确保开启多选
                    });
                };

                // 更新游戏区选择器
                _this.updatePackeages1= function (Packeages) {
                    var datapackeages1 = [];
                    for (var k in Packeages) {
                        var v = Packeages[k];
                        datapackeages1.push({
                            name: v.package_no,
                            value: v.package_no,
                        });
                    }
                    // 渲染游戏区选择器
                    xmSelect.render({
                        el: '#serverPackage1',
                        name: "serverPackage1",
                        language: 'zn',
                        data: datapackeages1,
                        multiple: true,// 确保开启多选
                    });
                };



                // 更新游戏区选择器
                _this.updateGameArea = function (services) {
                    var dataServers = [];
                    for (var k in services) {
                        var v = services[k];
                        dataServers.push({
                            name: v.name,
                            value: v.server_id,
                        });
                    }
                    // 渲染游戏区选择器
                    xmSelect.render({
                        el: '#gameAreas',
                        name: "gameAreas",
                        language: 'zn',
                        data: dataServers,
                        multiple: true,// 确保开启多选
                    });
                };




                var dataSg = [];
                for(var k in serverGroup){
                    var v = serverGroup[k];
                    dataSg.push({
                        name:v.group_name,
                        value:v.group_id,
                    })
                }

                xmSelect.render({
                    el: '#serverGroup',
                    name:"serverGroup",
                    language: 'zn',
                    data: dataSg,
                    on: function(data){
                        // 选择器值发生变化时触发
                        console.log('DATA:', data);
                        var selectedValues = data.arr.map(item => item.value);
                        // 在这里编写您想要执行的方法
                        handleServerGroupChange(selectedValues);
                    }
                })

                _this.updateGameArea(services); // 初始渲染区服列表选择器

                function handleServerGroupChange(selectedValues) {
                    // 在这里编写您想要执行的逻辑
                    if (selectedValues.length === 0) {
                        // 如果 selectedValues 为空数组,则不发送请求
                        console.log('No server groups selected.');
                        return;
                    }
                    console.log('Selected server groups:', selectedValues);
                    var url = '/admin/server/serverList';
                    var params = { groups: selectedValues };
                    var paramsString = $.param(params);
                    $.get(url + '?' + paramsString, function(res) {
                        console.log('res:', res.data);
                        _this.$set(_this, 'services', res.data);
                        _this.$nextTick(function() {
                            form.render();
                        });
                    });
                }

                // 监听代理渠道选择器的变化
                form.on('select(gamechannel)', function(data) {
                    var channelcg = data.value; // 获取选择的渠道ID
                    if (channelcg) {
                        $.get("/admin/gamePackage/paginate",{page:1,limit:9999,channelcg:channelcg},function(res){
                            _this.packages = res.data;
                            _this.updatePackeages(_this.packages); // 初始渲染区服列表选择器
                        });
                    }
                });
                // 监听代理渠道选择器的变化
                form.on('select(gamechannel1)', function(data) {
                    var channelcg = data.value; // 获取选择的渠道ID
                    if (channelcg) {
                        $.get("/admin/gamePackage/paginate",{page:1,limit:9999,channelcg:channelcg},function(res){
                            _this.packages = res.data;
                            _this.updatePackeages1(_this.packages); // 初始渲染区服列表选择器
                        });
                    }
                });


                form.on('submit(data-search-btn)', function (data) {
                    _this.fetchPayActData(data.field);
                    return false;
                });
                //访问时初次加载
                _this.fetchPayActData({});

            });
        }
    })

</script>
